
<style scoped>
.el-aside {
    display: flex;
    justify-content: center;
    align-items: center;
}

section{
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.logo {
  width: 50px;
}

.headerLogo,.logo{
  cursor: pointer;
}


</style>

<template>
    <el-container>
      <el-aside width="auto" class="header-logo tap" >
        <img class="logo" src="@/assets/imgs/1.png" alt="Logo" style="width: 30px; margin-right: 5px"/>
        <b>图书管理系统</b>
      </el-aside>
      <el-aside width="auto" class="header-logo tap" >
        <el-dropdown>
          <span>管理员</span>
          <i class="el-icon-arrow-down" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown" >
            <el-dropdown-item>
                <span style="display:block;" @click="edit()">修改密码</span>
            </el-dropdown-item>
            <el-dropdown-item>
              <span style="display:block;" @click="loginout">退出系统</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown> 
      </el-aside>
      <el-dialog title="管理员密码" :visible.sync="editDialog" width="30%">
        <el-form label-width="80px" size="small" :model="editForm">
            <el-form-item label="旧密码" 
              prop="oldPassword"
              :label-width="formLabelWidth">
              <el-input v-model="editForm.oldPassword" autocomplete="off" placeholder="请输入原密码"></el-input>
            </el-form-item>
            <el-form-item label="新密码" 
              prop="newPassword"
              :label-width="formLabelWidth">
              <el-input v-model="editForm.newPassword" autocomplete="off" placeholder="请输入新密码"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
              <el-button @click="editDialog = false">取 消</el-button>
              <el-button type="primary" @click="editPassword">确 定</el-button>
        </div>
      </el-dialog>
    </el-container>
</template>

<script>
import request from "../utils/request";

export default {
  data() {
    return {
      activeIndex: "1",
      editDialog: false,
      editForm: {
        oldPassword: "",
        newPassword: ""
      },
      formLabelWidth: '80px'
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    loginout() {
      this.$confirm('是否退出系统？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$router.push({name: 'Login'})
      })
    },
    edit() {
      this.editForm = {}
      this.editDialog = true
    },
    editPassword() {
      request.post("/update",this.editForm).then(res =>{
        this.editDialog = false
        alert("修改成功")
      })
    }
  }
};
</script>